<template>
  <div class="shape" @click.stop="setcurComponent(currentData)" ref="shape">
    <div
      v-if="isCurComponent((currentData || {}).id)"
      class="shape-solid event-none"
    ></div>
    <div class="shape-dashed event-none"></div>

    <!-- 组件工具栏 -->
    <div class="shape-tab" v-show="show" :style="{ right: getRightStryle() }">
      <template v-if="isCurComponent((currentData || {}).id)">
        <i
          class="icon el-icon-delete tab-icon f16"
          @click.stop="
            delComponent(content.model.componentList, ((currentData || {}).id))
          "
        ></i>
      </template>
      <span v-else>{{currentData.label}}</span>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, inject, onMounted } from "vue";
export default defineComponent({
  name: "shape",
  props: ["data"],
  setup(props) {
    let currentData: any = ref(props.data);
    let content: any = inject("content");
    let show = ref(false);

    const setcurComponent = (val: any) => {
      content.curComponent = val;
    };

    const isCurComponent = (id: any) => {
      return content?.curComponent?.id === id;
    };

    const getRightStryle = () => {
      return '-86px';
    };

    const delComponent = (list: any, id: any) => {
      let index = list.reduce((pre: any, cur: any, i: number) => {
        return cur.id === id ? i : pre
      }, -1)
      if (index >= 0) {
        list.splice(index, 1)
      } else {
        list.filter((k: any) => k.child).forEach((k: any) => delComponent(k.child, id))
      }
    };

    onMounted(() => {
      show.value = true;
    });

    return {
      show,
      currentData,
      delComponent,
      content,
      getRightStryle,
      isCurComponent,
      setcurComponent,
    };
  },
});
</script>

<style lang="scss" scoped>
.shape {
  position: relative;
  &:hover > .shape-dashed {
    display: block;
  }
  .shape-dashed {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: dashed 1px #155bd4;
    z-index: 100;
  }
  .shape-solid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: solid 2px #155bd4;
    z-index: 100;
  }
  .shape-tab{
    position: absolute;
    top: 0; /*no*/
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px; /*no*/
    height: 24px; /*no*/
    font-size: 12px; /*no*/
    color: #333;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    &::after {
      content: '';
      position: absolute;
      right: 100%; /*no*/
      top: 7px; /*no*/
      width: 0; /*no*/
      height: 0; /*no*/
      border-width: 5px; /*no*/
      border-style: solid;
      border-color: transparent;
      margin-bottom: -1px; /*no*/
      border-right-width: 5px; /*no*/
      border-right-color: currentColor;
      color: #fff;
    }
  }
  .event-none {
    pointer-events: none;
  }

  .tab-icon {
    color: #969799;
    cursor: pointer;

    &:hover {
      color: #87888a;
    }
  }
}
</style>
